<template>
  <div class="home">
    <div class="home-icons" v-show="tabActive === 'home'">
      <HomeSwiper />

      <div class="home-icons-wrapper">
        <i-grid>
          <i-row
            v-for="(item, index) in iconList"
            :key="index">
            <i-grid-item
              v-for="(child, childIndex) in item"
              :key="child.icon"
              @click="detailClick(child)">
              <i-grid-icon i-class="home-iconsList-iviewIcon">
                <div class="home-iconsList-icon iconfont" :class="child.icon"></div>
              </i-grid-icon>
              <i-grid-label>
                <div class="home-iconsList-title">{{child.title}}</div>
              </i-grid-label>
            </i-grid-item>
          </i-row>
        </i-grid>
      </div>
    </div>


    <div v-show="tabActive === 'homeStatus'" class="house">
      <div class="list">
        <i-row
          v-for="(item, index) in houseList"
          :key="index">
          <i-col
            v-for="(child, childIndex) in item"
            span="12"
            class="list-col"
            :key="childIndex">
            <div class="detail" @tap="houseDetailClick(child)">
              <div class="roomNo">{{child.roomNo}}</div>
              <div class="roomStatus" :class="{
                yes: child.rentStatus === '已租',
                no: child.rentStatus === '未租',
                remind: child.rentStatus === '提醒'
              }">
                <div class="iconfont icon-ren"></div>
                <div class="status-text">{{child.rentStatus}}</div>
              </div>
              <div class="roomBtns clear">
                <div
                  v-if="child.rentStatus !== '已租'"
                  class="pull-left btn">
                  <span @tap.stop="detailRegister(child)">登记</span>
                </div>
                <div
                  v-if="child.rentStatus === '已租'"
                  class="pull-left btn">
                  <span @tap.stop="detailReadMeter(child)">抄表</span>
                </div>
                <div
                  v-if="child.rentStatus === '已租'"
                  class="pull-left btn">
                  <span @tap.stop="detailCheckout(child)">退房</span>
                </div>
                <div
                  v-if="child.rentStatus === '已租'"
                  class="pull-left btn send">
                  <span @tap.stop="detailSend(child)">发送密码</span>
                </div>
              </div>
            </div>
          </i-col>
        </i-row>
      </div>

      <div class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>

      <i-action-sheet
        show-cancel
        :mask-closable="false"
        :visible="actionVisible"
        :actions="actionDetail"
        @cancel="actionCancel"
        @sure="actionSure">
        <div slot="header" style="padding: 16px">
          <div style="color: #444;font-size: 16px">确定吗？</div>
          <text>将会通过微信发送门锁密码</text>
        </div>
      </i-action-sheet>

      <i-message id="message" />
    </div>

    <div class="home-tabs">
      <i-tab-bar
        :current="tabActive"
        @change="tabChange">
        <i-tab-bar-item
          key="homeStatus"
          icon="computer"
          current-icon="computer_fill"
          title="房屋状态"></i-tab-bar-item>
        <i-tab-bar-item
          key="home"
          icon="homepage"
          current-icon="homepage_fill"
          title="房屋管理"></i-tab-bar-item>
      </i-tab-bar>
    </div>
  </div>
</template>

<script>
import HomeSwiper from 'components/HomeSwiper/HomeSwiper'
import { $Message } from '../../../static/iview/base/index'
import { mapGetters, mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList, sendList } from 'api/houseList'
import { roleKeys, homeIconList } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    HomeSwiper
  },
  computed: {
    iconList () {
      const isHaveRoleArr = []

      homeIconList.map(item => {
        if (item.roleName !== undefined) {
          if (this.Roles[item.roleName]) {
            isHaveRoleArr.push(item)
          }
        } else {
          isHaveRoleArr.push(item)
        }
      })

      const filterIconList = []

      isHaveRoleArr.map((item, index) => {
        if (index % 3 === 0) {
          filterIconList.push([])
        }
        filterIconList[filterIconList.length - 1].push(item)
      })

      return filterIconList
    },
    houseList ({ houseAllList }) {
      const list = []

      houseAllList.map((item, index) => {
        if (index % 2 === 0) {
          list.push([])
        }

        list[list.length - 1].push(item)
      })

      return list
    },
    ...mapGetters([
      'Roles'
    ])
  },
  onShow () {
    this.page = 1
    this.getList('init', true)
  },
  onPullDownRefresh () {
    this.page = 1
    this.getList('refresh', false)
  },
  onReachBottom () {
    this.getMoreList()
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      page: 1,
      houseAllList: [],
      isNoMoreData: false,
      isLoadingMore: false,
      actionVisible: false,
      actionDetail: [
        {
          name: '发送',
          color: '#ed3f14',
          loading: false
        }
      ],
      tabActive: 'homeStatus'
      // iconList: homeIconList()
    }
  },
  methods: {
    initData () {
      this.houseList = []
      this.isNoMoreData = false
    },
    tabChange ({ target }) {
      this.tabActive = target.key
    },
    detailClick (child) {
      if (child.link === 'contract') {
        this.SET_TITLEKEY(child.title)
      }
      wx.navigateTo({
        url: `/pages/${child.link}/main`
      })
    },
    houseDetailClick (item) {
      let key = 'edit'
      if (!this.Roles[roleKeys.editHouseList]) {
        key = 'read'
      }
      this.SET_CURRENTITEM(item)
      this.SET_ACTIONKEY(key)
      wx.navigateTo({
        url: '/pages/houseDetail/main'
      })
    },
    detailCheckout (item) {
      if (!this.Roles[roleKeys.checkout]) {
        this.$showToast({
          title: '您没有退房权限',
          icon: 'none'
        })
        return
      }
      this.SET_CHECKOUTKEY('addEdit')
      this.SET_CHECKOUT(item)
      wx.navigateTo({
        url: '/pages/checkoutDetail/main'
      })
    },
    detailReadMeter (item) {
      if (!this.Roles[roleKeys.readMeter]) {
        this.$showToast({
          title: '您没有抄表权限',
          icon: 'none'
        })
        return
      }

      this.SET_READMETER(item)
      wx.navigateTo({
        url: '/pages/readMeterDetail/main'
      })
    },
    detailRegister (item) {
      if (!this.Roles[roleKeys.checkInHouseList]) {
        this.$showToast({
          title: '您没有登记权限',
          icon: 'none'
        })
        return
      }
      this.SET_REGISTERKEY('addEdit')
      this.SET_REGISTER(item)
      wx.navigateTo({
        url: '/pages/contractDetail/main'
      })
    },
    detailSend ({ id }) {
      if (!this.Roles[roleKeys.wxSendPwdHouseList]) {
        this.$showToast({
          title: '您没有发送密码权限',
          icon: 'none'
        })
        return
      }

      this.deleteId = id
      this.actionVisible = true
    },
    actionSure (detail) {
      if (this.actionDetail[0].loading) {
        return
      }

      this.sendList(this.deleteId)
    },
    actionCancel () {
      if (this.actionDetail[0].loading) {
        return
      }
      this.actionVisible = false
    },
    getMoreList () {
      if (this.isNoMoreData) {
        return
      }
      this.page += 1
      this.getList('more', true)
    },
    async sendList (id) {
      this.actionDetail[0].loading = true

      const res = await sendList(id)

      this.actionDetail[0].loading = false
      this.actionCancel()

      if (res.code === ERR_OK) {
        $Message({
          content: '发送成功',
          type: 'success'
        })
      } else {
        $Message({
          content: '发送失败',
          type: 'error'
        })
      }
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.isNoMoreData = false
        this.isLoadingMore = true
      }

      const res = await getList(this.page)

      if (type === 'refresh') {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init' || type === 'refresh') {
          this.houseAllList = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.houseAllList = [...this.houseAllList, ...res.rows]
          this.isLoadingMore = false
        }

        if (res.rows.length < pageSize) {
          this.isNoMoreData = true
        }
      }
    },
    ...mapMutations({
      'SET_TITLEKEY': 'contract/SET_TITLEKEY',
      'SET_CURRENTITEM': 'houseDetail/SET_CURRENTITEM',
      'SET_ACTIONKEY': 'houseDetail/SET_ACTIONKEY',
      'SET_REGISTER': 'contractDetail/SET_CURRENTITEM',
      'SET_REGISTERKEY': 'contractDetail/SET_ACTIONKEY',
      'SET_CHECKOUT': 'checkoutDetail/SET_CURRENTITEM',
      'SET_CHECKOUTKEY': 'checkoutDetail/SET_ACTIONKEY',
      'SET_READMETER': 'readMeterDetail/SET_CURRENTITEM'
    })
  }
}
</script>

<style lang="scss">
  .home {
    .home-icons {
      .home-iconsList-iviewIcon {
        width: 40px;
        height: 40px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .home {
    > .home-icons {
      width: 100%;
      position: relative;
      padding-bottom: 50px;
      > .home-icons-wrapper {
        width: 100%;
        position: relative;
        .home-iconsList-icon {
          width: 40px;
          height: 40px;
          overflow: hidden;
          position: relative;
          border-radius: 50%;
          background-color: green;
          color: white;
          text-align: center;
          font-size: 20px;
          line-height: 40px;
          &.house {
            background-color: rgb(131, 185, 77);
          }
          &.lease {
            font-size: 24px;
            background-color: rgb(62, 140, 209);
          }
          &.bill {
            font-size: 28px;
            background-color: rgb(245, 210, 71);
          }
          &.meter {
            font-size: 24px;
            background-color: rgb(68, 152, 84);
          }
          &.contract {
            background-color: rgb(195, 123, 116);
          }
          &.person {
            font-size: 18px;
            background-color: rgb(76, 151, 207);
          }
          &.notice {
            background-color: rgb(107, 168, 181);
          }
          &.statistics {
            font-size: 17px;
            background-color: rgb(178, 205, 73);
          }
          &.setting {
            font-size: 23px;
            background-color: rgb(74, 84, 92);
          }
        }
      }
    }
    > .house {
      padding-bottom: 100rpx;
      > .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        padding: 0 20rpx;
      }
      > .list {
        padding-left: 20rpx;
        .list-col {
          .detail {
            border: 1px solid #f2f2f2;
            margin-bottom: 20rpx;
            margin-right: 20rpx;
            padding: 20rpx;
            > .roomNo {
              font-size: 32rpx;
            }
            > .roomStatus {
              text-align: center;
              padding: 20rpx 0;
              color: lightgray;
              &.yes {
                color: $color-success;
              }
              &.no {
                color: $color-error;
              }
              &.remind {
                color: $color-warning;
              }
              > .iconfont {
                font-size: 70rpx;
              }
              > .status-text {
                font-size: 24rpx;
                margin-top: 10rpx;
              }
            }
            > .roomBtns {
              display: flex;
              align-items: center;
              > .btn {
                flex: 1;
                font-size: 28rpx;
                text-align: center;
                &.send {
                  flex: 0 0 130rpx;
                }
                > span {
                  background-color: $color-default;
                  color: white;
                  padding: 4rpx 8rpx;
                  border-radius: 6rpx;
                }
              }
            }
          }
        }
      }
    }
    > .home-tabs {
      width: 100%;
      height: 50px;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }
</style>
